<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8" />
	<title>凯盛项目管理系统</title>
	
	<link rel="stylesheet" type="text/css" href="${basePath }/css/bootstrap.min.css">
	<!-- <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> -->
	<script type="text/javascript" src="${basePath }/js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
</head>
<body class="body">
	
	<jsp:include page="include/top.jsp"/>
	
	<div class="container">
		<div class="row">
			
			<jsp:include page="include/side.jsp">
				<jsp:param value="goal" name="tag"/>
			</jsp:include>
			
			<div class="span9">
				<ul class="breadcrumb" style="margin-top:15px;border-radius:3px 3px 0px 0px">
					<li class="active">
						<a href=""><i class="icon-th"></i>${goal.g_name }</a>
					</li>
					<li style="float:right">
						<a href="${basePath }/goal/toEditGoal?id=${goal.id}&code=1002" class="link-black"><i class="icon-edit"></i>编辑</a>
					</li>
				</ul>
				<div class="wall">
					<p>${goal.g_describle }</p>
					<div class="progress progress-danger progress-striped active" id="total-bar" style="cursor:pointer">
						<div class="bar" style="width:${goal.g_rate};" id="total-bar-show">已经完成${goal.g_rate }</div>
					</div>
					<div class="page-header">
						<a class="btn btn-success" href="${basePath }/task/toNewTask"><i class="icon-plus icon-white"></i>添加新任务</a>
					</div>
					<dl>
						<c:forEach items="${taskList }" var="t">
							<dt><i class="icon-bookmark"></i><a href="${basePath }/task/toEditTask?id=${t.id }">${t.t_name }</a>&nbsp;&nbsp;&nbsp;&nbsp;[${t.employee.username }]<span class="pull-right">创建时间:&nbsp;&nbsp;${t.t_createTime }<a href="${basePath }/task/toEditTask?id=${t.id }"><i class="icon-edit"></i>编辑</a></span></dt>
							<dd>${t.t_describle }</dd>
							<div class="progress progress-striped active total-bar ${t.t_stat == '100%' ? 'progress-success' : '' }"  style="cursor:pointer" onclick="show(this)" id="${t.id }">
								<div class="bar total-bar-show" style="width:${t.t_rate}" id="${t.id }show">已经完成${t.t_rate }</div>
							</div>
						</c:forEach>
						
					</dl>
				</div>
			</div>
			
		</div>
	</div>
	<script type="text/javascript">
		function show(obj){
			var id = $(obj).attr("id");
			//alert(id);
			$("#"+id).click(function(event){
				//alert(event.pageX);
				var width = event.pageX;
				var start = 426;
				var end = 1092;
				var show = (width - start)/(end - start);
				//转换成字符串
				/*var showstr = "" + show + "";
				var index = showstr.indexOf(".",0);
				//alert(show);
				var result = showstr.substring(0,(index+3))*100;*/
				var result = show.toFixed(2)*100;
				var percent = result + "%";
				//alert(result);
				//alert(showstr.length + " : " + showstr.indexOf("."));
				$("#"+id+"show").css("width",percent);
				$("#"+id+"show").text("已经完成"+percent);
				if("100%" == percent){
					$("#"+id).addClass("progress-success");
				}else{
					$("#"+id).removeClass("progress-success");
				}
				if(result <= 12 && result >= 0){
					$("#"+id+"show").text(percent);
				}
				
				//ajax处理
				$.post("${basePath}/task/editBar",{"id":id,"task.t_rate":percent},function(rate){
					$("#total-bar-show").css("width",rate);
					$("#total-bar-show").text("已经完成"+rate);
					if("100%" == rate){
						$("#total-bar-show").addClass("progress-success");
					}
				});
			});
			
		};
	</script>
</body>
</html>
